<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>聚合搜索</title>
        <!-- 当我点击必应的时候就跳到必应的搜索页面，所以用jquery框架来进行触发事件 -->
        <script src="jquery.min.js"></script>
    </head>

    <body>
        <div style="width: 100%; text-align: center;">
            <input type="button" value=" 必 应 " onclick="updateSearch('https://www.bing.com')"> &nbsp;&nbsp;&nbsp;

            <input type="button" value=" 搜 狗 " onclick="updateSearch('https://www.sogou.com')"> &nbsp;&nbsp;&nbsp;
            <input type="button" value=" 360 " onclick="updateSearch('https://www.so.com')"> &nbsp;&nbsp;&nbsp;
        </div>
        <hr>
        <iframe id="ifr" style="width: 100%;height: 600px;" src="https://www.bing.com" frameborder="0"></iframe>

        <script>
            function updateSearch(url) {
                //sttr是设置属性的意思，先用jquery拿到组件（html标签），然后设置属性
                //url是在调用这个方法的时候传递的参数
                jQuery("#ifr").attr("src", url);
            }
        </script>
    </body>

</html>